@import url("https://fonts.googleapis.com/css2?family=Sacramento&display=swap");
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: "Sacramento", cursive;
}
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
min-height: 100vh;
gap: 2rem;
}
.img-container {
overflow: hidden;
}
.img-container img {
cursor: pointer;
width: 100%;
height: 100%;
object-fit: cover;
transition: all 0.3s ease-out;
}
.img-container img:hover {
transform: scale(1.2);
}
.modal {
background-color: rgba(0, 0, 0, 0.8);
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease-out;
}
.modal.open {
opacity: 1;
pointer-events: all;
}
.full-img {
position: absolute;
height: 75%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0.5);
transition: all 0.3s ease-out;
}
.full-img.open {
transform: translate(-50%, -50%) scale(1);
}
.modal p {
color: white;
font-size: 2rem;
position: absolute;
bottom: 5%;
left: 50%;
transform: translate(-50%, -5%);
}